<template>
  <div>
    <HeaderNav :title="$t('m.headernav.UPDPASSWORD')" :showBack="true" />
    <div class="login_container">
      <div class="login_input_container">
        <!-- <img src="../assets/img/user.png" class="login_input_img" /> -->
        <input type="text" :placeholder="$t('m.msg.MSG11')" class="login_input" v-model="formData.password" />
      </div>
      <div class="login_input_container">
        <!-- <img src="../assets/img/password.png" class="login_input_img" /> -->
        <input type="text" :placeholder="$t('m.msg.MSG12')" class="login_input" v-model="formData.newPassword" />
      </div>
	  <div class="login_input_container">
        <!-- <img src="../assets/img/password.png" class="login_input_img" /> -->
        <input type="text" :placeholder="$t('m.msg.MSG13')" class="login_input" v-model="formData.renewPassword" />
      </div>
      <div class="login_btn" @click="updBtn()">{{$t('m.msg.OK_BTN')}}</div>
    </div>
  </div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import { RadioGroup, Radio } from 'vant';
import {postQuery} from '@/api/query';
export default {
  name: 'updPassword',
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    HeaderNav
  },
  data() {
    return {
      formData: {}
      
    }
  },
  methods: {
    updBtn(){
      var that = this;
      if(!that.formData.password){
        that.$toast.fail(that.$i18n.t('m.msg.MSG14'));
        return
      }
      if(!that.formData.newPassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG15'));
        return
      }
      if(!that.formData.renewPassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG16'));
        return
      }
      if(that.formData.newPassword != that.formData.renewPassword){
        that.$toast.fail(that.$i18n.t('m.msg.MSG17'));
        return
      }
      var fd = new FormData()
      fd.append('password', that.formData.password)
      fd.append('newPassword', that.formData.newPassword)
      postQuery('/member/update/password', fd)
        .then (res => {
          console.log(res)
          if(res.code == 200){
            that.$toast.success(that.$i18n.t('m.msg.MSG4'));
            that.$router.go(-1);
          }else{
            that.$toast.fail(res.msg);
          }
      })
    }
    
  },
  mounted () {
  },
}
</script>
<style scoped>
  .van-radio__icon .van-icon{
    border: 10px solid black;
  }
  .login_container{
    padding-top: 6vh;
  }

  .login_input_container{
    display: flex;
    align-items: center;
    width: 90vw;
    height: 120px;
    border-radius: 50px;
    margin-left: 5vw;
    margin-bottom: 2vh;
    /* border: 2px #a1a1a1 solid; */
    background-color: #FCFCFC;
  }

  .login_input_img{
    height: 40px;
    width: 40px;
    margin: 0px 10px;
  }

  .login_input{
    width: 70%;
    border: none;
    background-color: #FCFCFC;
    zoom: 1.2;
    margin-left: 10%;
  }

  .login_link_container{
    font-size: 32px;
    display: flex;
    width: 40vw;
    margin-left: 50vw;
    justify-content: space-between;

  }

  .login_link{
    color: #01D2FF;
  }

  .login_btn{
    height: 100px;
    width: 90vw;
    margin: 5vh 5vw;
    background-color: #01D2FF;
    color: white;
    font-size: 36px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
